<template>
	<view class="song-detail-page" v-if="currentSong">
		<view class="header">
			<view>
				<text class="title">{{ currentSong.name }}</text>
				<image src="/static/icons/edit.svg" class="edit-icon"
					@click="openEditModal('name', currentSong.name)" />
			</view>
			<view>
				<text class="description">{{ currentSong.description }}</text>

				<image src="/static/icons/edit.svg" class="edit-icon"
					@click="openEditModal('description', currentSong.description)" />
			</view>
		</view>

		<view class="tab-container sticky-tabs">
			<view v-for="tab in tabs" :key="tab.value" class="tab-item" :class="{ active: activeTab === tab.value }"
				@click="activeTab = tab.value">
				{{ tab.label }}
			</view>
		</view>

		<!-- 歌词部分 -->
		<view v-show="activeTab === 'lyrics'" class="content-container" scroll-y>
			<view class="lyric-item" v-for="(line, index) in currentSong.lyrics" :key="index">
				{{ line }}
				<image src="/static/icons/edit.svg" class="edit-icon" @click="openEditModal('lyrics', line, index)" />
			</view>
		</view>

		<!-- 场景部分 -->
		<view v-show="activeTab === 'scenes'" class="content-container" scroll-y>
			<view class="scene-item" v-for="(scene) in currentSong.scenes" :key="scene.id">
				<view>
					<text class="scene-title">{{ scene.name }}</text>
					<image src="/static/icons/edit.svg" class="edit-icon"
						@click="openEditModal('sceneName', scene.name, scene.id)" />
				</view>
				<view>
					<text class="scene-desc">{{ scene.description }}</text>
					<image src="/static/icons/edit.svg" class="edit-icon"
						@click="openEditModal('sceneDesc', scene.description, scene.id)" />
				</view>
				<view class="media-container">
					<view v-for="(img, idx) in scene.images" :key="idx" class="scene-image-wrapper">
						<image :src="img" mode="aspectFill" class="scene-image"
							@click="previewImage(img, scene.images)" />
						<view class="delete-btn" @click.stop="deleteImage(scene, idx)">
							<image src="/static/icons/close.svg" class="close-icon" />
						</view>
					</view>
					<view class="scene-image">
						<image src="/static/icons/img.svg" @click="addImg(scene)" mode="aspectFit" class="add-image" />
					</view>

				</view>

				<!-- <ImgModal :visible="scene.pop" :content="scene.description" :total="scene.total"
					:scene="scene" @confirm="handleImgSave" @close="scene.pop=false" /> -->
			</view>
		</view>

		<!-- 编辑弹窗 -->
		<EditModal :visible="isEditModalVisible" :text="editText" @save="handleSave" @close="closeEditModal" />

		<!-- 编辑弹窗 -->
		<ImgModal :visible="isImgModalVisible" ref="imgModal" @confirm="handleImgSave"
			@close="isImgModalVisible = false" />

		<!-- <ImgModal :visible="isImgModalVisible" ref="imgModal" :content="imgFormData.content" :total="imgFormData.total"
			:scene="imgFormData.scene" @confirm="handleImgSave" @close="isImgModalVisible=false" /> -->
	</view>
</template>

<script setup>
import { ref, computed, reactive, onMounted, onUnmounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useSongStore } from '@/stores/songs';
import EditModal from './EditModal.vue';
import ImgModal from './ImgModal.vue';
const isImgModalVisible = ref(false);
const currentSceneId = ref(0);

const imgModal = ref(null);

const songStore = useSongStore();
const props = defineProps(['id']);
const activeTab = ref('lyrics');
const tabs = [
	{ label: '歌词', value: 'lyrics' },
	{ label: '场景', value: 'scenes' }
];
const curId = ref(0);
const currentSong = computed(() => {
	return songStore.songs.find(song => song.id === curId.value);
});

const isEditModalVisible = ref(false);
const editText = ref('');
const editType = ref('');
const editIndex = ref(null);

const imgFormData = reactive({
	content: '',
	total: 2,
	scene: '中景'
})

const previewImage = (current, urls) => {
	uni.previewImage({
		current,
		urls,
		loop: true,
		indicator: 'number',
	});
};

const deleteImage = (scene, index) => {
	scene.images.splice(index, 1);
	songStore.updateSong(currentSong.value);
};

const openEditModal = (type, text, index = null) => {
	editType.value = type;
	editText.value = text;
	editIndex.value = index;
	isEditModalVisible.value = true;
};

const closeEditModal = () => {
	isEditModalVisible.value = false;
};

const handleSave = (newText) => {
	if (editType.value === 'name') {
		currentSong.value.name = newText;
	} else if (editType.value === 'description') {
		currentSong.value.description = newText;
	} else if (editType.value === 'lyrics') {
		currentSong.value.lyrics[editIndex.value] = newText;
	} else if (editType.value === 'sceneName') {
		const scene = currentSong.value.scenes.find(scene => scene.id === editIndex.value);
		if (scene) scene.name = newText;
	} else if (editType.value === 'sceneDesc') {
		const scene = currentSong.value.scenes.find(scene => scene.id === editIndex.value);
		if (scene) scene.description = newText;
	}

	// 提交到服务端
	songStore.updateSong(currentSong.value);
	closeEditModal();
};

// 修改 addImg 函数
function addImg(scene) {
	// scene.pop = true;
	// return
	// if (currentSceneId.value) {
	// 	uni.showToast({
	// 		title: '当前场景处理中',
	// 		icon: 'none'
	// 	})
	// 	return;
	// }
	// currentSceneId.value = scene.id;
	isImgModalVisible.value = true;
	console.log("currentSong", currentSong)
	imgFormData.content = scene.description;
	// 使用正则表达式提取括号内的内容
	const match = scene.description.match(/\(([^|]+)\|/);

	if (match) {
		const result = match[1].trim(); // 提取匹配的内容并去除空格
		console.log(result); // 输出: 全景
		imgFormData.scene = result
	} else {
		console.log("未找到匹配的内容");
	}

	imgModal.value.open(scene.id, imgFormData.content, 2, imgFormData.scene)

}

// 添加关闭和保存处理函数
const closeImgModal = () => {
	isImgModalVisible.value = false;
};

const handleImgSave = async (imgData) => {
	console.log("imgData", imgData)
	closeImgModal();
	const list = await songStore.createImg({
		desc: imgData.content,
		total: Number(imgData.total),
		scene: imgData.scene
	})

	const scene = currentSong.value.scenes.find(scene => scene.id === imgData.id);
	console.log("currentSong", currentSong.value)
	scene.images.push(...list)
	songStore.updateSong(currentSong.value);
	console.log("scene", scene)
	// currentSceneId.value = 0;
};

onLoad((options) => {
	curId.value = parseInt(options.id);
	songStore.fetchSongs();
	// uni.setNavigationBarTitle({
	// 	title: currentSong.value?.name || '歌曲详情'
	// });
});

onMounted(() => {
	uni.setKeepScreenOn({
		keepScreenOn: true
	});
})
onUnmounted(() => {
	uni.setKeepScreenOn({
		keepScreenOn: false
	});
})
</script>

<style lang="scss" scoped>
.sticky-tabs {
	position: sticky;
	/* #ifdef H5 */
	top: calc(44px + env(safe-area-inset-top));
	/* #endif */

	/* #ifdef APP-PLUS */
	top: 0;
	/* 44px为导航栏高度 */
	/* #endif */

	/* #ifdef MP-WEIXIN */
	top: 0;
	/* #endif */
	z-index: 100;
	border-bottom: solid 3rpx #eee;
}

.song-detail-page {
	padding: 30rpx;
	background: #f5f5f5;
	min-height: 100vh;

	.header {
		margin-bottom: 40rpx;

		.title {
			font-size: 40rpx;
			color: #333;
			font-weight: bold;
			margin-bottom: 16rpx;
		}

		.description {
			font-size: 28rpx;
			color: #666;
		}
	}

	.tab-container {
		display: flex;
		margin-bottom: 30rpx;
		background: white;
		overflow: hidden;

		.tab-item {
			flex: 1;
			text-align: center;
			padding: 24rpx 0;
			font-size: 30rpx;
			color: #666;
			transition: all 0.3s;

			&.active {
				color: #fff;
				background: #313131;
			}
		}
	}

	.content-container {
		padding: 20rpx;
		background: white;
		border-radius: 12rpx;
		box-sizing: border-box;

		.lyric-item {
			padding: 24rpx 0;
			font-size: 28rpx;
			color: #333;
			border-bottom: 1rpx solid #eee;

			&:last-child {
				border-bottom: none;
			}
		}

		.scene-item {
			padding: 30rpx 0;
			border-bottom: 1rpx solid #eee;

			.scene-title {
				font-size: 30rpx;
				color: #333;
				margin-bottom: 12rpx;
				font-weight: 500;
			}

			.scene-desc {
				font-size: 26rpx;
				color: #666;
			}

			.media-container {
				margin-top: 20rpx;
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 20rpx;

				.scene-image {
					width: 200rpx;
					height: 150rpx;
					border-radius: 8rpx;
					background: #eee;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.add-image {
					width: 72rpx;
					height: 72rpx;
				}

			}
		}
	}
}

.edit-icon {
	width: 30rpx;
	height: 30rpx;
	margin-left: 10rpx;
	cursor: pointer;
}

.scene-image-wrapper {
	position: relative;
	width: 100%;
	height: 150rpx;
	border-radius: 8rpx;
	overflow: hidden;

	.scene-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.delete-btn {
		position: absolute;
		top: 8rpx;
		right: 8rpx;
		width: 40rpx;
		height: 40rpx;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;

		.close-icon {
			width: 24rpx;
			height: 24rpx;
		}
	}
}
</style>